<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
  <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	    <meta http-equiv="Cache-Control" content="no-cache" />
	    <meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta content="telephone=no,email=no,address=no" name="format-detection">
		<title>物流追踪</title>
		<link rel="stylesheet" href="${ctxWebStatic }/css/swiper.min.css" />
		<link rel="stylesheet" href="${ctxWebStatic }/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${ctxWebStatic }/css/font-awesome.min.css" />
		<link rel="stylesheet" href="${ctxWebStatic }/css/reset.css" />
		<link rel="stylesheet" href="${ctxWebStatic }/css/index.css" />
		<script type="text/javascript" src="${ctxWebStatic }/js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript" src="${ctxWebStatic }/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="${ctxWebStatic }/js/placeholdr.js" ></script>
		<script type="text/javascript" src="${ctxWebStatic }/js/swiper.jquery.min.js" ></script>
		<script type="text/javascript" src="${ctxWebStatic }/js/top_nav.js" ></script>
		<style type="text/css">
		.red_btn{
			width: 106px;
		    height: 34px;
		    line-height: 34px;
		    border-radius: 2px;
		    display: inline-block;
		    font-size: 16px;
		    text-align: center;
	        background: #D3001E;
    		color: #fff;
	    }
		.red_btn:HOVER{
    		color: #fff;
	    }
		</style>
		<script>
		$(function(){
	    	 $("#uls").find("li").removeClass("cur");
	    	 $("#uls").find("li").eq(0).addClass("cur");
	    		 $("#logId").empty(); 
	    		 $("#trs").empty(); 
		    	var co=$("#uls").find("li").eq(0).attr("id");
		    	var com=co.substring(0, co.indexOf("@"));
		    	var wuCode=co.substring(co.indexOf("@")+1, co.length);
	            var key="35dbd972c9dd4a492b01c771a0859971";
	            $.ajax({
		    		type:"post",
		    		url :"${ctx}/sys/orders/waybillData?wuCode="+wuCode,
		    		dataType:"json",
		    		success:function(data){
		    			
		    			$("#span1").text(data[0].ordersCode);
		    			$("#span2").text(data[0].logisticsCode);
		    			$("#span3").text(data[0].logistics);
		    			var roleidArray = new Array("");
		    			$(data).each(function(k,v){
		    				html="<tr><td>"+v.goodsCnName+"</td><td>"+v.goodsCode +"</td><td>"+v.num+"</td></tr>";
		    				$("#trs").append(html);	
		    				roleidArray.push(v.wareHoseName);
		    			})
		    			roleidArray = roleidArray.join(",").substring(1);
		    			$("#span4").text(roleidArray);
		    			
		    		}
		    	})
		    	
		    	
		    	$.ajax({
		    		  type:"post",
		    		  url :"http://v.juhe.cn/exp/com?key="+key,
		    		  dataType:"jsonp",
		    		  success:function(data){
		    			  var data=data.result;
		    			  console.log(data);
		    			  $(data).each(function(k,v){
		    				 if(v.com==com){
		    					 $.ajax({
		    						 type:"post",
		    						 url:"http://v.juhe.cn/exp/index?key="+key+"&com="+v.no+"&no="+wuCode, 
		    						 dataType:"jsonp",
		    						 success: function(data){
		    							 var reason=data.reason;
		    							 console.log(reason)
		    							 var data=data.result;
		    							 if(data!=null){
		    							 var list=data.list;
		    							 dateArr=[];
		    							 dateArr[-1]=0;
		    							 $(list).each(function(k,v){ 
		    								 var ti=v.datetime.split(' ');
		    								 t_Date=ti[0];
		    								 t_Time=ti[1];
		    								 dateArr[k]=t_Date;
		    								var ht=$("#apps").clone();
		    								if(t_Date == dateArr[k-1]){
		    									 ht.find('.logistic_circle').removeClass('logistic_circle_red');
		    									 ht.find('.p1').text('');
		    								 }else{
		    									 ht.find('.logistic_circle').addClass('logistic_circle_red');
		    									 ht.find('.p1').text(t_Date);
		    								 }
		    								ht.find('.p2').text(t_Time);
		    								ht.find('.p3').text(v.remark);
		    								$(".logistic_item").append(ht);
		    							 })
		    							 
		    						 }else{
		    							 var ht=$("#apps").clone();
		    							 ht.find('.logistic_circle').addClass('logistic_circle_red');
		    							 ht.find('.p3').text(reason);
		    							 $(".logistic_item").append(ht);
		    						 }
		    							 
		    						 }
		    					 
		    					 })
		    					 return false; 
		    				 }
		    			  })
		    			  
		    		  }
		    	}) 
	    		 
	     })
	    
	     
	     $(function(){
	    	 $("#uls").find("li").click(function(k,v){
	    		$("#uls").find("li").removeClass("cur");
	    		$(this).addClass("cur");
	    		 $("#logId").empty(); 
	    		 $("#trs").empty(); 
		    	var co=$("#uls").find("li").eq($(this).index()).attr("id");
		    	var com=co.substring(0, co.indexOf("@"));
		    	var wuCode=co.substring(co.indexOf("@")+1, co.length);
	            var key="35dbd972c9dd4a492b01c771a0859971";
	            $.ajax({
		    		type:"post",
		    		url :"${ctx}/sys/orders/waybillData?wuCode="+wuCode,
		    		dataType:"json",
		    		success:function(data){
		    			console.log(data)
		    			$("#span1").text(data[0].ordersCode);
		    			$("#span2").text(data[0].logisticsCode);
		    			$("#span3").text(data[0].logistics);
		    			var roleidArray = new Array("");
		    			$(data).each(function(k,v){
		    				html="<tr><td>"+v.goodsCnName+"</td><td>"+v.goodsCode +"</td><td>"+v.num+"</td></tr>";
		    				$("#trs").append(html);	
		    				roleidArray.push(v.wareHoseName);
		    			})
		    			roleidArray = roleidArray.join(",").substring(1);
		    			$("#span4").text(roleidArray);
		    			
		    		}
		    	})
		    	
		    	
		    	$.ajax({
		    		  type:"post",
		    		  url :"http://v.juhe.cn/exp/com?key="+key,
		    		  dataType:"jsonp",
		    		  success:function(data){
		    			  var data=data.result;
		    			  $(data).each(function(k,v){
		    				 if(v.com==com){
		    					 $.ajax({
		    						 type:"post",
		    						 url:"http://v.juhe.cn/exp/index?key="+key+"&com="+v.no+"&no="+wuCode, 
		    						 dataType:"jsonp",
		    						 success: function(data){
		    							 var reason=data.reason;
		    							 var data=data.result;
		    							 if(data!=null){
		    							 var list=data.list;
		    							 dateArr=[];
		    							 dateArr[-1]=0;
		    							 $(list).each(function(k,v){ 
		    
		    								 var ti=v.datetime.split(' ');
		    								 t_Date=ti[0];
		    								 t_Time=ti[1];
		    								 dateArr[k]=t_Date;
		    								var ht=$("#apps").clone();
		    								if(t_Date == dateArr[k-1]){
		    									 ht.find('.logistic_circle').removeClass('logistic_circle_red');
		    									 ht.find('.p1').text('');
		    								 }else{
		    									 ht.find('.logistic_circle').addClass('logistic_circle_red');
		    									 ht.find('.p1').text(t_Date);
		    								 }
		    								ht.find('.p2').text(t_Time);
		    								ht.find('.p3').text(v.remark);
		    								$(".logistic_item").append(ht);
		    							 })
		    							 
		    							 }else{
		    								 var ht=$("#apps").clone();
			    							 ht.find('.logistic_circle').addClass('logistic_circle_red');
			    							 ht.find('.p3').text(reason);
			    							 $(".logistic_item").append(ht);
		    							 }
		    							 
		    						 } 
		    					 })
		    					 return false; 
		    				 }
		    			  })
		    			  
		    		  }
		    	}) 
	    		 
	    	 })
	    	 
	    	// $("#uls").find(	"li").eq(0).click();
	     }) 
		</script>
		
	</head>
	<body class="bg_gry">
	<!--头部结束-->
	<!--导航-->
	<!--导航结束-->
	<!--订单详情-->
	<input value="${orderCode }" id="orderCode" type="hidden"/>
	<section>
		<div class="container">
				<div class="detail_bg_box pad_t20">
					<!--物流追踪-->					
					<div class="goods_detail_info_box  mar_16 clearfix">
						<h3><span>物流追踪</span></h3>
						<!--物流追踪切换-->
						<div class="logistic_tab_box">
							<div class="logistic_tit_nav">
								<ul class="clearfix" id="uls">
								    <c:forEach var="webWaybill" items="${webWaybill }" varStatus="status">
								    <c:if test="${status.index+1<10 }">
									<li id="${webWaybill.logistics }@${webWaybill.logisticsCode }"><a href="#">包裹0${status.index+1 }</a></li>
									</c:if>
									<c:if test="${status.index+1>=10 }">
									<li id="${webWaybill.logistics }@${webWaybill.logisticsCode }"><a href="#">包裹${status.index+1 }</a></li>
									</c:if>
									</c:forEach>
									<!-- <li><a href="#">包裹02</a></li>
									<li><a href="#">包裹03</a></li>
									<li><a href="#">包裹04</a></li> -->
								</ul>
							</div>
							<div class="logistic_contain">
								<div class="con">
									<div class="logistic_item" id="logId">
								</div>
								<div class="con" style="display: none;">
									
									<p>wwwww</p>
								</div>
								<div class="con" style="display: none;">
									<p>44444</p>
								</div>
								<div class="con" style="display: none;">
									<p>55555</p>
								</div>
							</div>
						</div>
						<!--物流追踪切换结束-->
						<!--表格信息-->
						<div class="logistic_detail_info clearfix">
							<div class="logistic_detail_info_item clearfix">
								<p class="col-md-4  col-sm-6">
									订单编号：
									<span id="span1"></span>
								</p>
								<p class="col-md-4 col-sm-6">
									物流单号：
									<span id="span2"></span>
								</p>
								<p class="col-md-2 col-sm-6">
									物流公司：
									<span id="span3"></span>
								</p>
								<p class="col-md-2 col-sm-6">
									发货仓库：
									<span id="span4"></span>
								</p>
							</div>
							<!--表格列表-->
							<div class="logistic_table  col-xs-10 col-sm-7  clearfix">
								<table class="table table-bordered">
								    <thead>
								      <tr>
								        <th>商品名称</th>
								        <th>商品编号</th>
								        <th>数量</th></tr>
								    </thead>
								    <tbody id="trs">
								      
								      
								    </tbody>
								  </table>
							</div>
							<!--表格列表结束-->
						</div>
							<a href="javascript:history.go(-1)" class="red_btn">返回</a>
						<!--表格信息结束-->
					</div>
					<!--物流追踪结束-->
				</div>
			</div>
		</div>
	</section>
	<div id="apps">
	    <figure class="logistic_item_info clearfix">
					<div class="logistic_circle ">
					<b></b>
					</div>
					<div class="col-sm-2 col-md-2 logistic_date">
					<p class="p1"></p>
					</div>
					<div class="col-sm-8 col-md-9 logistic_date_info clearfix">
					<div class="col-xs-3 col-sm-3 col-md-2 pad0">
						<p class="p2"></p>
						</div>
					<div class="col-xs-9 col-sm-8 col-md-9">
					<p class="p3"></p>
				</div>
			</div>
		</figure>
	</div>
	<!--订单详情结束-->	
	<!--foot-->

	<!--foot结束-->
	<!--发票详情弹框-->

</html>
